<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AntV X6 Example</title>
  <style>
    body {
      background-color: #1a1a1a;
      color: #ffffff;
      font-family: Arial, sans-serif;
    }
    #container {
      width: 800px;
      height: 600px;
      border: 1px solid #444;
      margin: 50px auto;
    }

    .custom-html {
    width: 100%;
    height: 100%;
    background: #333232;
    border-radius: 1em;
    box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
      0 0.02125em 0.06125em rgb(0 0 0 / 25%);
    perspective: 600px;

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 50%;
      background: #333232
        linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
      border-radius: 0 0 1em 1em;
      transform: rotateX(180deg);
      transform-origin: center top;
      transition: 0.7s ease-in-out transform;
      content: ' ';
    }

    &:hover::before {
      transform: rotateX(0);
    }
  }
  </style>
</head>
<body>
  <div id="container"></div>

  <!-- 引入 @antv/x6 的 UMD 包 -->
  <style src="css/x6.css"></style>
  <script src="js/x6.js"></script>
  <script>
    // 确保 DOM 完全加载后再执行脚本
    document.addEventListener('DOMContentLoaded', function() {
      // 创建一个新的 Graph 实例
      const graph = new X6.Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        background: {
          color: '#1a1a1a',
        },
        grid: true,
        connecting: {
          connector: 'rounded',
          connectionPoint: 'boundary',
          router: 'manhattan',
        },
      });

      X6.Shape.HTML.register({
  shape: 'custom-update-html',
  width: 160,
  height: 80,
  effect: ['data'],
  html(cell) {
    const { color,label } = cell.getData()
    const div = document.createElement('div')
    div.className = 'custom-html'
    div.innerHTML = label
    div.style.background = color
    div.style.display = 'flex';  // 使用 Flexbox 布局
    div.style.justifyContent = 'center'; // 水平居中
    div.style.alignItems = 'center';     // 垂直居中
    div.style.height = '100%';           // 确保 div 的高度可以包含内容并正确对齐
    div.style.width = '100%';            // 确保 div 的宽度可以占据整个可用空间
    div.style.textAlign = 'center';      // 文本水平居中（对于不支持Flexbox的旧浏览器）
    return div
  },
})


      // 添加节点
      const startNode = graph.addNode({
         data: {
          color: '#933232',
          label: 'start',
      },
      shape: 'custom-update-html',
        x: 300,
        y: 50,
        width: 100,
        height: 40,
        label: '开始',
        /*
        attrs: {
          body: {
            fill: '#333',
            stroke: '#666',
          },
          label: {
            fill: '#fff',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },*/
      });

      const decisionNode = graph.addNode({
        x: 300,
        y: 200,
        width: 100,
        height: 40,
        label: '判断',
        shape: 'polygon',
        points: '100,70 60,100 100,130 140,100',
        attrs: {
          body: {
            fill: '#333',
            stroke: '#666',
          },
          label: {
            fill: '#fff',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
      });

      const branch1Node = graph.addNode({
        x: 150,
        y: 350,
        width: 100,
        height: 40,
        label: '分支1',
        attrs: {
          body: {
            fill: '#333',
            stroke: '#666',
          },
          label: {
            fill: '#fff',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
      });

      const branch2Node = graph.addNode({
        x: 450,
        y: 350,
        width: 100,
        height: 40,
        label: '分支2',
        attrs: {
          body: {
            fill: '#333',
            stroke: '#666',
          },
          label: {
            fill: '#fff',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
         anchorPoints: [
          [0.5, 0],  // 顶部中心
          [0.5, 1]   // 底部中心
        ]
      });

      const endNode = graph.addNode({
        x: 300,
        y: 500,
        width: 100,
        height: 40,
        label: '结束',
        attrs: {
          body: {
            fill: '#333',
            stroke: '#666',
          },
          label: {
            fill: '#fff',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
      });

      // 添加边
      graph.addEdge({
        source: startNode,
        target: decisionNode,
        attrs: {
          line: {
            stroke: '#666',
            strokeWidth: 2,
          },
        }
      });

      graph.addEdge({
        source: decisionNode,
        target: branch1Node,
        attrs: {
          line: {
            stroke: '#666',
            strokeWidth: 2,
          },
        },
          router: {
    name: 'orth',
    args: {},
  },
      });

      graph.addEdge({
        source: decisionNode,
        target: branch2Node,
        attrs: {
          line: {
            stroke: '#666',
            strokeWidth: 2,
          },
        },
          router: {
    name: 'orth',
    args: {},
  },
      });

      graph.addEdge({
        source: branch1Node,
        target: endNode,
        attrs: {
          line: {
            stroke: '#666',
            strokeWidth: 2,
          },
        },
           router: {
      name: 'manhattan',
    args: {
      startDirections: ['bottom'],
      endDirections: ['top'],
    },
  },
      });

      graph.addEdge({
        source: branch2Node,
        target: endNode,
        attrs: {
          line: {
            stroke: '#666',
            strokeWidth: 2,
          },
        },
          router: {
      name: 'manhattan',
    args: {
      startDirections: ['bottom'],
      endDirections: ['top'],
    },
  },
      });
    });
  </script>
</body>
</html>